<script setup lang="ts">
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  recSceneList: {
    type: Array as PropType<string[]>,
    default: () => ['recSceneNew'],
  },
});
const emit = defineEmits([
  "update:value",
]);
const crowd = ref<CrowdLabelInterface[]>([]);
const loadData = () => {
  WxtUtils.customFormRequest('https://dmp-gateway.alimama.com/api/dmp/v2/crowd/list', props.bizCode, {
    topicSceneType: 2,
    appCode: 'dmpPlatformFeatured',
    properties: {},
    campaignId: props.campaignId,
    promotionType: 'item',
    subPromotionType: 'item',
    subPromotionTypeList: ['item'],
    wordList: [],
    wordPackageList: [],
    materialIdList: props.materialIdList,
    topicId: 79,
  }).then((res: any) => {
        if (res.data.info.ok) {
          WxtUtils.customFormRequest('https://dmp-gateway.alimama.com/api/dmp/crowd/applyJxTemplate.json', props.bizCode, {
            topicSceneType: 2,
            appCode: 'dmpPlatformFeatured',
            materialIdList: props.materialIdList,
            campaignId: props.campaignId,
            promotionType: 'item',
            subPromotionType: 'item',
            subPromotionTypeList: ['item'],
            topicId: 79,
            templateBaseInfoList: res.data.data.result.map((item: any) => {
              return {
                topicId: 79,
                templateId: item.templateId,
                templateRuleFilling: null,
              }
            }),
          }).then(result => {
            WxtUtils.customRequest('https://one.alimama.com/label/dmpConvert.json', props.bizCode, {
                  bizCode: props.bizCode,
                  crowdList: res.data.data.result.map((item: any, key: number) => {
                    return {
                      labelList: [
                        {
                          labelId: '3000525',
                        }
                      ],
                      optionList: [
                        {
                          optionName: item.templateName,
                          optionValue: result.data.data.result[key].dmpCrowdId + '',
                          templateId: item.templateId,
                          topicId: 79,
                        }
                      ],
                    }
                  })
                },
            ).then((res2: any) => {
              crowd.value = res2.data.data.list;
            });
          });
        }
      }
  );
};
const state = reactive<any>({
  selectedAll: false,
  indeterminate: false,
  selectedCrowd: [],
});
watch(() => state.selectedCrowd, (val) => {
  if (val.length === crowd.value.length) {
    state.selectedAll = true;
    state.indeterminate = false;
  } else if (val.length === 0) {
    state.selectedAll = false;
    state.indeterminate = false;
  } else {
    state.selectedAll = false;
    state.indeterminate = true;
  }
  emit('update:value', val.map((item: any) => {
    return crowd.value.find((it: any) => it.optionList[0].optionValue === item);
  }));
}, {
  deep: true,
});
const toggleSelectedAll = (val: { target: { checked: boolean; }; }) => {
  if (val.target.checked) {
    state.selectedCrowd = crowd.value.map((item: any) => item.optionList[0].optionValue);
  } else {
    state.selectedCrowd = [];
  }
}
loadData();
</script>

<template>
  <a-checkbox :checked="state.selectedAll" :indeterminate="state.indeterminate" @change="toggleSelectedAll">全选
  </a-checkbox>
  <a-divider style="margin: 10px 0;"/>
  <a-checkbox-group v-model:value="state.selectedCrowd" style="display: block">
    <a-row type="flex" v-for="item in crowd">
      <a-checkbox :key="item.labelId" :value="item.optionList[0].optionValue">{{ item.optionList[0].optionName }}
      </a-checkbox>
    </a-row>
  </a-checkbox-group>
</template>

<style scoped>

</style>
